<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="main" style="width: 100%;height:100%;">
        <!--工具条-->
        <!-- <div style="display:flex;margin-bottom:30px;margin-left:30px;">
          <div style="margin-right:40px;display:flex;align-items:center;">
            <div>充值USDT数量:</div>
            <div>{{dataInfo.czUs}}</div>
          </div>
          <div style="display:flex;align-items:center;">
            <div>活币数量:</div>
            <div>{{dataInfo.hbCy}}</div>
          </div>
        </div> -->
        <el-form
          :inline="true"
          :model="queryinfo"
          class="toolbar"
          label-position="right"
          label-width="70px"
        >
          <el-row>
            <el-form-item label="手机号">
              <el-input v-model="queryinfo.queryString"></el-input>
            </el-form-item>
            <el-form-item label="数量范围">
              <el-input v-model="queryinfo.userId" style="width: 150px;" placeholder="最小值"></el-input>
              <span style="margin: 0 10px; font-size: 18px;">~</span>
              <el-input v-model="queryinfo.queryType" style="width: 150px;" placeholder="最大值"></el-input>
            </el-form-item>
            <!-- <el-form-item label="最小数量">
              <el-input v-model="queryinfo.userId"></el-input>
            </el-form-item>-->
            <el-form-item label>
              <el-button @click="search" type="success" style="width: 170px">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <el-card>
          <el-table
            :data="dataList"
            highlight-current-row
            v-loading="gridLoading"
            class="grid"
            style="width: 100%；"
          >
            <el-table-column label="id" prop="id" width="80"></el-table-column>
            <el-table-column label="姓名" prop="nickName"></el-table-column>
            <el-table-column label="手机号" prop="mobile"></el-table-column>
            <el-table-column label="数量" prop="money"></el-table-column>
            <el-table-column label="种类" prop="coinName"></el-table-column>
            <el-table-column label="账号状态" prop="status">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status == 1 ? 'success':'danger'"
                >{{scope.row.status == 1 ? '正常' : '不正常'}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="时间" prop="updateTime"></el-table-column>
            <el-table-column label="数据" prop="updateTime">
              <!-- <el-tag type="success"></el-tag> -->
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.normal == true ? 'success':'danger'"
                >{{scope.row.normal == true ? '正常' : '不正常'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="check(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryinfo.pagenum"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="queryinfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-card>
      </div>
    </el-card>
    <el-dialog title="正常数据" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <!-- <el-table-column property="userId" label="时间" width="150"></el-table-column> -->
        <el-table-column property="createTime" label="时间" width="150"></el-table-column>
        <el-table-column property="billDescription" label="类别"></el-table-column>
        <el-table-column property="money" label="数量（CY）" width="100"></el-table-column>
      </el-table>
    </el-dialog>
    
  </div> 
</template>

<script>
// import mix from './Report-mixins.js'
export default {
  // mixins: [mix]
  data() {
    return {
      // 查询参数
      queryinfo: {
        queryType: "",
        userId: "",
        queryString: "",
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      searchForm: {
        mobile: "",
        realName: "",
        uuid: ""
      },
      money: {
        pageNo: 1,
        pageSize: 10
      },
      dataList: [],
      dialogTableVisible: false,
      gridData: [],
      dataInfo: {},
      
    };
  },
  created() {
    this.refreshData();
    this.getTJdata();
  },
  methods: {
    getTJdata() {
      this.$http.post("/manage/userCoin/sysCount", {}).then(res => {
        console.log(res.data);
        if (res.data.status == 1) {
          this.dataInfo = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    check(row) {
      console.log(row);
      this.dialogTableVisible = true;
      let parmes = {
        queryString: row.updateTime,
        userId: row.userId,
        queryId: row.coinId
      };
      this.$http.post("/manage/userCoin/bill", parmes).then(res => {
        // console.log(res);
        if (res.data.status == 1) {
          this.gridData = res.data.data;
        }
      });
    },
    search() {
      this.queryinfo.pagenum = 1;
      this.refreshData();
    },
    async refreshData() {
      const { data: res } = await this.$http.post(
        "/manage/userCoin/coinList",
        this.queryinfo
      ); //, { params: this.queryinfo }
      // console.log(res);
      // this.number = res.data;
      this.dataList = res.data.list;
      this.total = res.data.total;
    },
    // 监听 pageSize 的变化，并立即获取最新的数据
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.refreshData();
    },
    // 监听 pageNum 的变化，并立即获取最新的数据
    handleCurrentChange(newPage) {
      this.queryinfo.pageNo = newPage;
      this.refreshData();
    }
    
  }
};
</script>

<style lang="less" scoped>
</style>
